<template>
    <div class="box">
        <div class="header">
            <div class="title">{{ recordInfo.name }}的{{ recordInfo.flowName}}申请</div>
            <div v-if="recordInfo.statusId > 0" class="status">
                <div>{{ recordInfo.status }}</div>
            </div>
            <div v-else-if="recordInfo.statusId == -1 || recordInfo.statusId == -2" class="status-cancel">
                <div>{{ recordInfo.status }}</div>
            </div>
        </div>
        <div class="detail">
            <div class="title">
                申请详情
            </div>
            <div class="detailRow">
                <div class="detailName">申请人姓名：</div>
                <div class="detailValue">{{ recordInfo.applicationItemsFixed.empName }}</div>
            </div>
            <div class="detailRow">
                <div class="detailName">申请人工号：</div>
                <div class="detailValue">{{ recordInfo.applicationItemsFixed.empId }}</div>
            </div>
            <div class="detailRow">
                <div class="detailName">申请人部门名称：</div>
                <div class="detailValue">{{ recordInfo.applicationItemsFixed.deptName }}</div>
            </div>
            <div class="detailRow">
                <div class="detailName">申请人职位名称：</div>
                <div class="detailValue">{{ recordInfo.applicationItemsFixed.positionName }}</div>
            </div>
            <div class="detailRow" v-for="item in recordInfo.items" :key="item.name">
                <div class="detailName">{{ item.itemName }}：</div>
                <div class="detailValue">{{ item.itemValue }}</div>
            </div>
        </div>
        <div class="progress">
            <div class="title">
                申请进展
            </div>
            <div class="progressNodes">
                <el-timeline style="width: 100%;">
                    <template v-if="recordInfo.statusId > 0">
                        <el-timeline-item v-for="(node, index) in nodes"
                            :color="index <= recordInfo.statusId - 1 ? activeColor : readyColor" :key="node.priority">
                            {{ node.nodeName }}
                        </el-timeline-item>
                    </template>
                    <template v-else-if="recordInfo.statusId == -1">
                        <el-timeline-item :color="cancelColor">
                            已撤销
                        </el-timeline-item>
                    </template>
                    <template v-else-if="recordInfo.statusId == -2">
                        <el-timeline-item :color="cancelColor">
                            已被驳回
                        </el-timeline-item>
                    </template>
                </el-timeline>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const activeColor = '#7AC756';
const readyColor = '#E0E3EA';
const cancelColor = '#b62534';
const props = defineProps({
    recordInfo: {
        type: Object
    },
    nodes: {
        type: Array,
        default: () => [
            {
                priority: 0,
                name: "待审批",
            },
            {
                priority: 1,
                name: "已审批",
            }
        ],
    }
});

onMounted(()=>{
    console.log("recordInfo：",props.recordInfo);
})
</script>

<style scoped>
.box {
    background-color: #fff;
    margin: 5px;
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #021148;
}

.status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.status,
.status-cancel div {
    padding: 4px 8px;
    border-radius: 4px;
    border: 3px solid #39ab0b;
    background-color: rgba(57, 171, 11, 26%);
    color: #39ab0b;
    font-size: 12px;
}

.status-cancel div {
    border: 3px solid #ae0d1d;
    background-color: rgba(174, 13, 29, 26%);
    color: #ae0d1d;
}

.detail,
.process {
    margin-top: 5px;
    margin-bottom: 5px;
}

.detailRow {
    display: flex;
    align-items: left;
    padding: 5px;
}

.detailName {
    font-size: 16px;
    color: #021148;
    font-weight: bold;
}

.detailValue {
    font-size: 16px;
    color: #9a9a9a;
}
</style>